<script setup>
    import { ref, toRaw } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { common, service } from '@utils'
    import { Plus, Edit, Delete } from '@element-plus/icons-vue'
    import { usePremission } from '@hooks'
    import { SERVE_URL,imgSERVEURL } from '@utils/config'
    import EditCom from './Edit'

    const premission = usePremission({
        add: 'goods:category:add',
        edit: 'goods:category:updateById',
        delete: 'goods:category:deleteById'
    })
    const data = ref()
    const loading = ref(false)
    const tableRef = ref()
    const editRef = ref()
    const getData = async () => {
        loading.value = true
        const res = await service.bfqz.categorys()
        if (res) {
            data.value = res.filter((item) => item.goodsCategoryId != 1 && item.goodsCategoryId != 0 && item.goodsCategoryId != -1)
        }
        loading.value = false
    }

    const afterEditRow = (row) => {
        getData()
        // if (row.isUpdate) {
        //     for (let i = 0; i < data.value.length > 0; i++) {
        //         if (data.value[i].id === row.id) {
        //             data.value[i] = { ...row }
        //             data.value = [...data.value]
        //             break
        //         }
        //     }
        // } else {
        //     data.value.push(row)
        //     tableRef.value.insert(row)
        // }
    }

    const deleteRow = async (row) => {
        ElMessageBox.confirm('是否删除此记录', '提示', {
            type: 'warning'
        }).then(async () => {
            const res = await service.bfqz.categoryDelete({goodsCategoryId :row.goodsCategoryId})
            if (res) {
                getData()
                ElMessage.success('删除成功')
                // for (let i = 0; i < data.value.length > 0; i++) {
                //     if (data.value[i].id === row.id) {
                //         data.value.splice(i, 1)
                //         break
                //     }
                // }
                // tableRef.value.remove(row)
            }
        })
    }

    getData()

    const width = (function (premission) {
        let width = 24
        premission.delete && (width += 33)
        premission.edit && (width += 33)
        premission.add && (width += 33)
        return Math.max(width, 60)
    })(premission)
</script>

<template>
    <section class="main-white">
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="editRef.open()">添加</el-button>
        </div>
        <vxe-table
            ref="tableRef"
            :loading="loading"
            :data="data"
            :max-height="common.tableHeight(false, premission.add ? 1 : 0)"
            :tree-config="{ transform: true, rowField: 'goodsCategoryId', parentField: 'pid' }"
            :column-config="{ resizable: true }"
            :row-config="{ keyField: 'id' }"
            highlight-hover-row
            round
            border
        >
            <vxe-column field="label" title="分类名称" tree-node width="200" />
            <vxe-column field="dictionaryCode" title="信用品类名称" />
            <vxe-column title="图片">
                <template #default="{ row }">
                    <div class="flex-align" v-if="row.picture">
                        <el-image
                            :src="imgSERVEURL + row.picture"
                            :preview-src-list="[imgSERVEURL + row.picture]"
                            class="table-image"
                        />
                    </div>
                </template>
            </vxe-column>
            <vxe-column title="操作" :width="width" fixed="right">
                <template #default="{ row, $rowIndex }">
                    <section class="flex-align flex-wrap">
                        <el-tooltip
                            v-if="premission.edit"
                            effect="dark"
                            content="修改"
                            placement="top"
                            :enterable="false"
                        >
                            <el-button
                                type="primary"
                                :icon="Edit"
                                size="small"
                                circle
                                @click="editRef.open({ ...row, index: $rowIndex })"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            v-if="premission.add"
                            effect="dark"
                            content="新增"
                            placement="top"
                            :enterable="false"
                        >
                            <el-button
                                type="primary"
                                plain
                                :icon="Plus"
                                size="small"
                                circle
                                @click="editRef.open({ pid: row.goodsCategoryId, index: $rowIndex })"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            v-if="premission.delete"
                            effect="dark"
                            content="删除"
                            placement="top"
                            :enterable="false"
                        >
                            <el-button
                                type="danger"
                                :icon="Delete"
                                size="small"
                                circle
                                @click="deleteRow(row)"
                            ></el-button>
                        </el-tooltip>
                    </section>
                </template>
            </vxe-column>
        </vxe-table>
        <edit-com ref="editRef" @refresh="afterEditRow" :categorys="data" />
    </section>
</template>
